<template>
	<view class="page-bg ranking">
		<page-header></page-header>
		<view class="ranking-hd mc-flex mc-space-between">
			<view class="ranking-hd-text mc-columns mc-flex-center">
				<view class="b f22">排行榜</view>
				<view class="mc-f12 mt10">当行排名：{{sort==0?'暂未上榜':`第${sort}名`}}</view>
			</view>
			<image src="../../../static/images/ranking_trophy.png" mode="widthFix"></image>
		</view>
		<view class="ranking-list">
			<view class="ranking-row">
				<view class="ranking-col1">排名</view>
				<view class="ranking-col2">昵称</view>
				<view class="ranking-col3">答题次数</view>
				<!-- <view class="ranking-col4">兑换券</view> -->
			</view>
			<view class="ranking-row" v-for="(item,index) in list" :key="item.userId">
				<view class="ranking-col1">
					<text v-if="index>2">{{index+1}}</text>
					<image :src="'../../../static/images/ranking_num'+(index+1)+'.png'" mode="widthFix" class="ranking-num" v-else></image>
				</view>
				<view class="ranking-col2 mc-flex mc-flex-vcenter">
					<image :src="item.photo" mode="aspectFill" class="ranking-avatar"></image>
					<text class="ml10 user-name mc-ellipsis">{{item.nickName}}</text>
				</view>
				<view class="ranking-col3 ranking-item-col3">{{item.answerCount}}</view>
				<!-- <view class="ranking-col4 ranking-item-col4">{{item.coupon}}</view> -->
			</view>
			<uni-load-more :status="status" :contentText="contentText" v-if="total"></uni-load-more>
		</view>
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	let gData = {};
	let _self;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				sort: 0,

				list: [],
				total: 0,
				status: "more",
				contentText: {
					contentdown: "",
					contentrefresh: "正在加载...",
					contentnomore: ""
				}
			}
		},
		onLoad(options) {
			_self = this;
			this.rankingList()
			this.myRanking()
		},
		onUnload() {
			gData = {}; /*因为全局变量会保存，再次打开该页面时会造成一些数据错误 */
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.rankingList();
		},
		// 上拉加载
		onReachBottom() {
			this.loadList();
		},
		methods: {
			async myRanking() {
				let data = await this.$api.home.myRanking();
				this.sort = data.sort || 0;
			},
			//  一次性获取列表
			async rankingList() {
				uni.showNavigationBarLoading();
				try {
					let data = await this.$api.home.rankingList({
						page: '1', // 页数
						rows: '100' //
					});
					console.log(data)
					gData.rankingList = data.list;
					console.log(gData.rankingList)
					this.total = gData.rankingList.length;
					this.isok = true;
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
					this.initList();
				} catch (e) {
					this.status = "more";
					console.log('request fail', e);
				}
			},
			// 初始化列表
			initList() {
				gData.page = 0;
				this.list = [];
				this.status = "more";
				this.loadList();
			},
			// 加载列表
			loadList() {
				if (!this.status != "noMore") {
					const page = gData.page + 1;
					this.status = "loading";
					const pageSize = 10;
					const addList = gData.rankingList.slice((page - 1) * pageSize, page * pageSize);
					const noMore = (page * pageSize) >= this.total;
					const length = this.list.length;
					const start = length == 0 ? 0 : length - 1;
					this.list = this.list.concat(addList)
					gData.page = page;
					this.status = noMore ? "noMore" : "more";
				};
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e) {
				// _self.$api.setFormId(e);
			},
		},
	}
</script>
<style lang="scss" scoped>
	.ranking {
		color: white;
		font-size: 24rpx;

		.ranking-hd {
			padding: 150rpx 40rpx 0;

			.f22 {
				font-size: 44rpx;
			}

			image {
				width: 260rpx;
			}
		}

		.ranking-list {
			padding: 36rpx;
		}

		.ranking-row {
			position: relative;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			text-align: center;
			margin-top: 10rpx;
			z-index: 9;

			&:before {
				content: ' ';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #241975;
				opacity: 0.5;
				z-index: -1;
			}

			.ranking-col1 {
				flex: 1;
			}

			.ranking-col2 {
				flex: 3;

				.user-name {
					width: 240rpx;
					text-align: left;
				}
			}

			.ranking-col3 {
				flex: 1;
			}

			// .ranking-col4 {
			// 	flex: 1;
			// }

			.ranking-item-col3 {
				color: #ff7888;
			}

			.ranking-item-col4 {
				color: #fe9d00;
			}
		}

		.ranking-num {
			width: 40rpx;
			height: 51rpx;
		}

		.ranking-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 80rpx;
		}
	}
</style>
